<template>
  <div>
    <template>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>任务中心</el-breadcrumb-item>
        <el-breadcrumb-item>任务列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              placeholder="请输入内容"
              v-model="queryInfo.query"
              clearable="true"
              @clear="likeClear()"
            >
              <el-button slot="append" icon="el-icon-search" @click="getTaskList"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addTaskVisible = true">新增任务</el-button>
          </el-col>
        </el-row>
        <!-- 任务列表 -->

        <el-table :data="taskList" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="任务 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="任务名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="任务类型">
                  <span>{{ props.row.typeClassify==1?'日常任务':'一次性任务' }}</span>
                </el-form-item>
                <el-form-item label="任务介绍">
                  <span>{{ props.row.introduce }}</span>
                </el-form-item>
                <el-form-item label="确认方式">
                  <span>{{ props.row.accomplishType==1?'主账号确认':'次级账号确认' }}</span>
                </el-form-item>
                <el-form-item label="需求等级">
                  <span>{{ props.row.prepositionLevel }}</span>
                </el-form-item>
                <el-form-item label="经验奖励">
                  <span>{{ props.row.awardLevel }}</span>
                </el-form-item>
                <el-form-item label="金币奖励">
                  <span>{{ props.row.awardMoney }}</span>
                </el-form-item>
                <el-form-item label="经验惩罚">
                  <span>{{ props.row.punishmentLevel }}</span>
                </el-form-item>
                <el-form-item label="金币惩罚">
                  <span>{{ props.row.punishmentMoney }}</span>
                </el-form-item>
                <el-form-item label="任务限时" v-if="props.row.limitTime!=null">
                  <span>{{ props.row.limitTime }}小时</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{props.row.createTime}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="任务 ID" prop="id"></el-table-column>
          <el-table-column label="任务名称" prop="name"></el-table-column>
          <el-table-column label="任务类型">
            <template slot-scope="pro">
              <span>{{pro.row.typeClassify==1?'日常任务':'一次性任务'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="修改任务0"
                :enterable="false"
                placement="top"
              >
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="getPutTaskInfo(scope.row.id)"
                  circle
                  size="mini"
                ></el-button>
              </el-tooltip>

              <el-tooltip
                class="item"
                effect="dark"
                content="删除任务"
                :enterable="false"
                placement="top"
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="removeTaskById(scope.row.id)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totle"
        ></el-pagination>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[10, 20, 40, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </template>

    <el-dialog
      title="新增任务"
      :visible.sync="addTaskVisible"
      width="50%"
      @close="addDialogClosed"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <el-form :model="addTaskInfo" ref="addTaskFormRef" label-width="120px" label-position="right">
        <el-form-item label="任务名" prop="name">
          <el-input v-model="addTaskInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="任务类型" prop="typeClassify">
          <el-radio-group v-model="addTaskInfo.typeClassify" size="medium">
            <el-radio border label="1">日常任务(每日可以完成一次)</el-radio>
            <el-radio border label="2">一次性任务</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="确认方式" prop="accomplishType">
          <el-radio-group v-model="addTaskInfo.accomplishType" size="medium">
            <el-radio border label="1">主账号确认完成(可以设置任务失败惩罚)</el-radio>
            <el-radio border label="2">次级账号确认完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务限时(小时)" prop="introduce">
          <el-input-number
            v-model="addTaskInfo.limitTime"
            :max="23"
            label="任务限时(小时)"
            :disabled="addTaskInfo.flag"
          ></el-input-number>
          <el-switch
            v-model="addTaskInfo.flag"
            active-text="关闭"
            inactive-text="开启"
            active-color="#ff4949"
            inactive-color="#13ce66"
            style="margin-left: 20px"
          ></el-switch>
        </el-form-item>
        <el-form-item label="任务介绍" prop="introduce">
          <el-input type="textarea" v-model="addTaskInfo.introduce"></el-input>
        </el-form-item>
        <el-form-item label="经验奖励" prop="awardLevel">
          <el-slider v-model="addTaskInfo.awardLevel" show-input :max="300"></el-slider>
        </el-form-item>
        <el-form-item label="金币奖励" prop="awardMoney">
          <el-slider v-model="addTaskInfo.awardMoney" show-input :max="300"></el-slider>
        </el-form-item>
        <el-form-item label="经验惩罚" prop="punishmentLevel">
          <el-slider v-model="addTaskInfo.punishmentLevel" show-input></el-slider>
        </el-form-item>
        <el-form-item label="金币惩罚" prop="punishmentMoney">
          <el-slider v-model="addTaskInfo.punishmentMoney" show-input></el-slider>
        </el-form-item>
        <el-form-item label="接取等级要求" prop="prepositionLevel">
          <el-slider v-model="addTaskInfo.prepositionLevel" :min="1" show-input></el-slider>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTaskVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTask">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改任务 -->
    <el-dialog
      title="修改任务"
      :visible.sync="putTaskVisible"
      label-width="120px"
      label-position="right"
      @close="putDialogClosed"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <el-form :model="putTaskInfo" ref="putTaskFormRef" label-width="120px">
        <el-form-item label="任务名" prop="name">
          <el-input v-model="putTaskInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="任务类型" prop="typeClassify">
          <el-radio-group v-model="putTaskInfo.typeClassify" size="medium">
            <el-radio border :label="1">日常任务(每日可以完成一次)</el-radio>
            <el-radio border :label="2">一次性任务</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="确认方式" prop="accomplishType">
          <el-radio-group v-model="putTaskInfo.accomplishType" size="medium">
            <el-radio border :label="1">主账号确认完成(可以设置任务失败惩罚)</el-radio>
            <el-radio border :label="2">次级账号确认完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务限时(小时)" prop="introduce">
          <el-input-number
            v-model="putTaskInfo.limitTime"
            :max="23"
            label="任务限时(小时)"
            :disabled="putTaskInfo.flag"
          ></el-input-number>
          <el-switch
            @change="show"
            v-model="putTaskInfo.flag"
            active-text="关闭"
            inactive-text="开启"
            active-color="#ff4949"
            inactive-color="#13ce66"
            style="margin-left: 20px"
          ></el-switch>
        </el-form-item>
        <el-form-item label="任务介绍" prop="introduce">
          <el-input type="textarea" v-model="putTaskInfo.introduce"></el-input>
        </el-form-item>
        <el-form-item label="经验奖励" prop="awardLevel">
          <el-slider v-model="putTaskInfo.awardLevel" max="300" show-input></el-slider>
        </el-form-item>
        <el-form-item label="金币奖励" prop="awardMoney">
          <el-slider v-model="putTaskInfo.awardMoney" max="300" show-input></el-slider>
        </el-form-item>
        <el-form-item label="经验惩罚" prop="punishmentLevel">
          <el-slider v-model="putTaskInfo.punishmentLevel" show-input></el-slider>
        </el-form-item>
        <el-form-item label="金币惩罚" prop="punishmentMoney">
          <el-slider v-model="putTaskInfo.punishmentMoney" show-input></el-slider>
        </el-form-item>
        <el-form-item label="接取等级要求" prop="prepositionLevel">
          <el-slider v-model="putTaskInfo.prepositionLevel" min="1" show-input></el-slider>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putTaskVisible = false">取 消</el-button>
        <el-button type="primary" @click="putTask">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import {
  removeTaskById,
  getPutTaskInfo,
  addTask,
  putTask,
  getSupervisoorTaskList,
  getTaskLikeList,
} from "@/utils/SupervisorApi";
export default {
  data() {
    return {
      putTaskVisible: false,
      queryInfo: {
        query: "",
        // 当前页数
        pageNum: 1,
        // 每页显示多少数据
        pageSize: 10,
      },
      addTaskVisible: false,
      addTaskInfo: {
        id: "",
        name: "",
        typeClassify: "1",
        introduce: "",
        prepositionLevel: "",
        awardLevel: "",
        awardMoney: "",
        accomplishType: "1",
        punishmentMoney: "",
        punishmentLevel: "",
        createTime: "",
        limitTime: 0,
        limitDate: "",
        flag: true,
      },
      putTaskInfo: {
        id: "",
        name: "",
        typeClassify: "1",
        introduce: "",
        prepositionLevel: "",
        awardLevel: "",
        awardMoney: "",
        accomplishType: "1",
        punishmentMoney: "",
        punishmentLevel: "",
        createTime: "",
        limitTime: 0,
        limitDate: "",
      },
      taskList: [],
      total: 0,
      flag: true,
      likeQueryInfo: {
        // 当前页数
        pageNum: 1,
        // 每页显示多少数据
        pageSize: 10,
        like: "",
      },
    };
  },
  created() {
    this.getTaskList();
  },
  methods: {
    async getTaskByLikeName() {
      if (this.likeQueryInfo.like == "") {
        return this.$message.error("任务名不能为空");
      }
      const { data: res } = await getTaskLikeList(this.likeQueryInfo);
      if (res.meta.status !== 200) {
        return this.$message.error("获取用户列表失败！");
      }
      this.taskList = res.data.list;
      this.total = res.data.total;
    },
    likeClear() {
      this.queryInfo.query = "";
      this.queryInfo.pageNum =1
      this.getTaskList();
    },
    show(e) {
      this.putTaskInfo.flag = e;
    },
    async removeTaskById(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该任务, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await removeTaskById({
        id: id,
        isDelete: 1,
      });
      if (res.meta.status !== 200) {
        this.$message.error("删除任务失败！");
        return;
      }
      this.$message.success("删除任务成功！");
      this.getTaskList();
    },

    async getPutTaskInfo(id) {
      const { data: res } = await getPutTaskInfo({ id });
      const obj = res.data;
      if (res.data.limitTime == null) {
        obj["flag"] = true;
      } else {
        obj["flag"] = false;
      }
      this.putTaskInfo = obj;
      this.putTaskVisible = true;
      console.log(this.putTaskInfo, res.data);
    },

    async addTask() {
      // 提交请求前，表单预验证
      if (this.addTaskInfo.name == null || this.addTaskInfo.name == "") {
        this.$message.error("名字不能为空");
        retrun;
      }
      if (this.addTaskInfo.flag == true) {
        this.addTaskInfo.limitTime = "";
      }
      const { data: res } = await addTask(this.addTaskInfo);
      if (res.meta.status !== 200) {
        this.$message.error("添加任务失败！");
        this.addTaskVisible = false;
        return;
      }
      this.$message.success("添加任务成功！");
      // 隐藏添加任务对话框
      this.addTaskVisible = false;
      this.getTaskList();
    },
    // 修改请求没写完
    async putTask() {
      // 提交请求前，表单预验证
      if (this.putTaskInfo.name == null || this.putTaskInfo.name == "") {
        this.$message.error("名字不能为空");
        retrun;
      }
      const { data: res } = await putTask(this.putTaskInfo);
      if (res.meta.status !== 200) {
        this.$message.error("修改任务失败！");
        return;
      }
      this.$message.success("修改任务成功！");
      // 隐藏添加任务对话框
      this.putTaskVisible = false;
      this.getTaskList();
    },
    putDialogClosed() {
      this.putTaskInfo.flag = true;
      this.$refs.putTaskFormRef.resetFields();
    },
    addDialogClosed() {
      this.addTaskInfo.flag = true;
      this.$refs.addTaskFormRef.resetFields();
    },
    async getTaskList() {
      const { data: res } = await getSupervisoorTaskList(this.queryInfo);
      if (res.meta.status !== 200) {
        return this.$message.error("获取任务列表失败！");
      }
      this.taskList = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(newSize) {
      if (this.likeQueryInfo.like == "") {
        this.queryInfo.pageSize = newSize;
        this.queryInfo.pageNum = 1;
        this.getTaskList();
      } else {
        this.likeQueryInfo.pageSize = newSize;
        this.likeQueryInfo.pageNum = 1;
        this.getTaskByLikeName();
      }
    },
    // 监听 页码值 改变事件
    handleCurrentChange(newSize) {
      if (this.likeQueryInfo.like == "") {
        this.queryInfo.pageNum = newSize;
        this.getTaskList();
      }else{
        this.likeQueryInfo.pageNum = newSize;
        this.getTaskByLikeName();
      }
    },
  },
};
</script>